<template>
  <el-dialog
    title="选择服务参数"
    top="10vh"
    :visible.sync="detailDialogVisible"
    close-on-press-escape
    :before-close="cancel"
    @open="init"
  >
    <div v-loading="loading" class="beautyService-container" style="padding: 10px;">
      <div class="img-box" style="display: flex;justify-content: center;align-item: center">
        <el-image
          style="width: 300px; height: 200px"
          :src="beautyService.imageUrl"
          fit="contain"
        />
      </div>
      <p>{{ beautyService.name }}</p>
      <p>{{ beautyService.introduction }}</p>
      <div v-if="beautyService.materialName" class="material-item material-box">
        <span>类型：</span>
        <el-radio-group v-model="beautyService.materialId">
          <el-radio v-for="(item,index) in materialList" :key="index" :label="item.id" border>{{ item.introduction }}</el-radio>
        </el-radio-group>
      </div>
      <div v-if="beautyService.isConsumeNum==='是'" class="material-item material-num">
        <span>数量：</span>
        <el-input-number v-model="number" :min="1" :max="10" />
      </div>
      <p class="service-price"><i>¥</i>{{ beautyService.isConsumeNum==='是' ? beautyService.price*number: beautyService.price }}</p>
      <div class="btn-bottom">
        <el-button style="float: right;margin-left: 10px;" type="primary" @click="addCart">添加</el-button>
        <el-button style="float:right;" @click="cancel">取 消</el-button>
      </div>

      <!-- <el-form
        ref="beautyService"
        :model="beautyService"
        class="form-container"
        :rules="AddRules"
        label-width="80px"
      >
        <el-form-item label="服务名称" prop="name">
          <el-input v-model="beautyService.name" :disabled="id?true:false" />
        </el-form-item>
        <el-form-item label="服务图片" prop="imageUrl">
          <el-upload
            class="avatar-uploader"
            action="/api/imgUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="beautyService.imageUrl" :src="beautyService.imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item label="服务介绍" prop="introduction">
          <el-input v-model="beautyService.introduction" type="textarea" />
        </el-form-item>
        <el-form-item label="服务价格" prop="price">
          <el-input v-model="beautyService.price" />
        </el-form-item>
        <el-form-item label="材料消耗" prop="materialName">
          <el-select v-model="beautyService.materialName" clearable placeholder="请选择材料消耗" :disabled="id?true:false">
            <el-option label="无" value="" />
            <el-option label="汽车膜" value="汽车膜" />
            <el-option label="座椅" value="座椅" />
            <el-option label="车漆" value="车漆" />
            <el-option label="轮胎" value="轮胎" />
          </el-select>
        </el-form-item>
        <el-form-item style="margin-bottom: 0px;">
          <el-button style="float: right;margin-left: 10px;" type="primary" @click="submitForm('beautyService')">{{ id? '修改':'添加' }}</el-button>
          <el-button style="float:right;" @click="cancel()">取 消</el-button>
        </el-form-item>
      </el-form> -->
    </div>
  </el-dialog>
</template>

<script>
// import { parseTime } from '@/utils'
import { getServiceInfo, getStockMaterial } from '@/api/beautyService'
import { getCart, setCart } from '@/utils/auth'
import { Message } from 'element-ui'
export default {
  name: 'ServiceDetail',
  props: {
    detailDialogVisible: Boolean,
    id: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      beautyService: {
        name: '',
        imageUrl: '',
        introduction: '',
        price: '',
        materialName: '',
        isConsumeNum: '',
        materialId: ''
      },
      materialList: null,
      // AddRules: { // 对话框表单验证
      //   name: [{ required: true, message: '服务名称不能为空', trigger: 'blur' }],
      //   imageUrl: [{ required: true, message: '请上传服务图片', trigger: 'blur' }],
      //   introduction: [{ required: true, message: '服务介绍不能为空', trigger: 'blur' }],
      //   price: [{ required: true, message: '服务价格不能为空', trigger: 'blur' }]
      // },
      loading: false,
      number: 1,
      currService: {
        serviceId: '',
        serviceName: '',
        materialName: '',
        materialId: '',
        number: 0,
        price: ''
      }
    }
  },
  methods: {
    init() {
      if (this.id) {
        this.loading = true
        getServiceInfo(this.id).then(res => {
          if (res) {
            this.beautyService.name = res.data.data.name
            this.beautyService.imageUrl = res.data.data.imageUrl
            this.beautyService.introduction = res.data.data.introduction
            this.beautyService.price = res.data.data.price
            this.beautyService.materialName = res.data.data.materialName
            this.beautyService.isConsumeNum = res.data.data.isConsumeNum

            getStockMaterial(this.beautyService.materialName).then(res => {
              if (res) {
                this.materialList = res.data.list
              }
            })
            setTimeout(() => {
              this.listLoading = false
            }, 2 * 1000)
          }
          this.loading = false
        })
      }
    },
    // submitForm(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       if (this.id) {
    //         modifyService(this.id, this.beautyService).then(res => {
    //           if (res) {
    //             Message({
    //               message: res.data.message,
    //               type: 'success',
    //               duration: 5 * 1000
    //             })
    //             this.cancel()
    //           }
    //         })
    //         this.$emit('getTable')
    //       } else {
    //         if (this.beautyService.imageUrl) {
    //           addService(this.beautyService).then(res => {
    //             if (res) {
    //               Message({
    //                 message: res.data.message,
    //                 type: 'success',
    //                 duration: 5 * 1000
    //               })
    //               this.$refs[formName].resetFields()
    //               this.$emit('closeDialog')
    //             }
    //           })
    //           this.$emit('getTable')
    //         } else {
    //           Message({
    //             message: '图片上传失败！',
    //             type: 'error',
    //             duration: 5 * 1000
    //           })
    //         }
    //       }
    //     } else {
    //       return false
    //     }
    //   })
    // },
    addCart() {
      this.currService.serviceId = this.id
      this.currService.serviceName = this.beautyService.name
      this.currService.materialId = this.beautyService.materialId
      this.currService.price = this.beautyService.price
      if (this.beautyService.isConsumeNum) { this.currService.number = this.number }
      const cart = getCart() && JSON.parse(getCart()) || []
      const has = cart.some(item => item.serviceId === this.currService.serviceId)
      if (has) {
        Message({
          message: '已存在该服务！',
          type: 'error',
          duration: 5 * 1000
        })
      } else {
        cart.push(this.currService)
        this.$emit('closeDetailDialog')
        Message({
          message: '添加成功！',
          type: 'success',
          duration: 5 * 1000
        })
      }
      setCart(cart)
      this.$emit('getCart')
    },
    cancel() {
      this.$emit('closeDetailDialog')
      this.number = 0
    }
  }
}
</script>

<style lang="scss" scoped>

::v-deep .el-dialog {
  height: 570px;
  width: 40%;
}
::v-deep .el-dialog__body {
  overflow-y: auto;
  height: 510px;
  padding: 0;
}
.el-radio{
  margin-right: 0;
}
.el-form-item{
  margin-bottom: 20px;
}
.material-item{
  margin-bottom: 5px;
}
.service-price{
  color: #e1251b;
  font-size: 20px;
  font-weight: 700;
  font-family: arial,sans-serif;
  i{
    font-style: normal;
    vertical-align: middle;
    font-size: 12px;
    font-weight: 700;
    font-family: MicrosoftYahei-regular,Arial,Helvetica,sans-serif;
    margin-right: 3px;
  }
}

</style>
